<template>
  <div id="app">
    <ul class="nav">
      <router-link :to="{path: '/'}" tag="li">删格 Grid</router-link>
      <router-link :to="{path: '/layout'}" tag="li">布局 Layout</router-link>
      <router-link :to="{path: '/button'}" tag="li">按钮 Button</router-link>
      <router-link :to="{path: '/input'}" tag="li">输入框 Input</router-link>
      <router-link :to="{path: '/radio'}" tag="li">单选框 Radio</router-link>
      <router-link :to="{path: '/checkbox'}" tag="li">多选框 Checkbox</router-link>
      <router-link :to="{path: '/switch'}" tag="li">开关 switch</router-link>
      <router-link :to="{path: '/table'}" tag="li">表格 table</router-link>
      <router-link :to="{path: '/select'}" tag="li">选择器 select</router-link>
      <router-link :to="{path: '/slider'}" tag="li">滑块 slider</router-link>
      <router-link :to="{path: '/datePicker'}" tag="li">日期选择器 datePicker</router-link>
      <router-link :to="{path: '/timePicker'}" tag="li">时间选择器 timePicker</router-link>
      <router-link :to="{path: '/cascader'}" tag="li">级联选择 Cascader</router-link>
      <router-link :to="{path: '/transfer'}" tag="li">穿梭框 Transfer</router-link>
      <router-link :to="{path: '/inputNumber'}" tag="li">数字输入框 InputNumber</router-link>
      <router-link :to="{path: '/rate'}" tag="li">评分 Rate</router-link>
      <router-link :to="{path: '/form'}" tag="li">表彰 Form</router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        ddd: ""
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;

    margin: 60px auto 40px;
  }

  #app .nav {
    padding: 0;
    overflow: hidden;
    background-color: #fafafa;
    margin-bottom: 20px;
  }

  #app .nav li {
    list-style: none;
    float: left;
    padding: 10px 15px;
  }

  #app .nav li:hover {
    color: #ff6600;
    cursor: pointer;
  }

  .box {
    padding: 30px
  }
  
  .router-link-exact-active {
    color: #e66;
  }
</style>